import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
  ScrollView,
  Image,
  TouchableOpacity,
} from 'react-native';
import { InfoNormalItem } from 'bee/components/MyInformation';
import { px2dp } from 'bee/utils/px2dp';
import { colors, sizes } from 'bee/themes';
import { Icon, Names } from 'bee/components/Icon';
import { LongCuttingLine } from 'bee/components/Line';

export default class MyInformation extends Component<prop> {
  constructor() {
    super();

    // this.state = {
    //   // 名字
    //   name: 'zhouzhou',
    //   //   营销编号
    //   code: '45234756284967',
    // };
  }

  render() {
    const { params } = this.props.navigation.state;
    return (
      <ScrollView>
        <View style={styles.outerBorder}>
          <TouchableOpacity
            onPress={() => {
              this.props.navigation.navigate('SettingPortrait', {
                portrait: params.portrait,
              });
            }}
          >
            {/* 头像 */}
            <InfoNormalItem height={px2dp(150)} title="头像">
              <View style={styles.changeStructure}>
                <Image
                  style={styles.headPortrait}
                  source={{ uri: params.portrait }}
                />
                <Icon
                  name={Names.gengduofuben}
                  size={sizes.f2}
                  color={colors['1103']}
                />
              </View>
            </InfoNormalItem>
          </TouchableOpacity>
          <LongCuttingLine />

          {/* 名字 */}
          <InfoNormalItem title="名字">
            <Text>{params.username}</Text>
          </InfoNormalItem>

          <LongCuttingLine />

          {/* 营销员编号 */}
          <InfoNormalItem title="营销员编号">
            <Text>{params.code}</Text>
          </InfoNormalItem>

          <LongCuttingLine />

          {/* 我的二维码 */}
          <TouchableOpacity
            onPress={() =>
              this.props.navigation.navigate('QRCode', {
                portrait: params.portrait,
                username: params.username,
                code: params.code,
              })
            }
          >
            <InfoNormalItem title="我的二维码">
              <View style={styles.changeStructure}>
                <Icon
                  name={Names.erweima}
                  color={colors['1103']}
                  size={sizes.f3}
                />
                <Icon
                  name={Names.gengduofuben}
                  color={colors['1103']}
                  size={sizes.f2}
                  style={{ marginLeft: px2dp(15) }}
                />
              </View>
            </InfoNormalItem>
          </TouchableOpacity>

          <LongCuttingLine />

          {/* 我的详细信息 */}
          <TouchableOpacity
            onPress={() => {
              this.props.navigation.navigate('MyDetailInfo', {
                username: params.username,
                code: params.code,
              });
            }}
          >
            <InfoNormalItem title="我的详细信息">
              <Icon
                name={Names.gengduofuben}
                color={colors['1103']}
                size={sizes.f2}
              />
            </InfoNormalItem>
          </TouchableOpacity>
        </View>

        <TouchableOpacity
          style={styles.outerBorder}
          onPress={() =>
            this.props.navigation.navigate('AccountAndSecurity', {
              code: params.code,
            })
          }
        >
          <InfoNormalItem title="账号安全">
            <Icon
              name={Names.gengduofuben}
              color={colors['1103']}
              size={sizes.f2}
            />
          </InfoNormalItem>
        </TouchableOpacity>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  blank: {
    height: px2dp(17),
  },
  headPortrait: {
    width: px2dp(102),
    height: px2dp(102),
    backgroundColor: colors['1102'],
    marginRight: px2dp(20),
  },
  changeStructure: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  outerBorder: {
    marginTop: px2dp(30),
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors['1104'],
  },
});
